import user from './modules/user'
import setting from './modules/setting'
/**
 * 实例化vuex
 */
import Vue from 'vue'
// 1. 导入Vuex
import Vuex from 'vuex'
// 2. 注册Vuex
Vue.use(Vuex)

// 3. 实例化Vuex创建store（仓库）=》存储全局状态数据
export default new Vuex.Store({
  strict: true, // 开启严格模式
  // 1. 定义全局共享数据
  state: {
  // state 状态, 即数据, 类似于vue组件中的data,
  // 语法：key(变量名):value(变量默认值)
  // 区别：
  // 1.data 是组件自己的数据,
  // 2.state 中的数据整个vue项目的组件都能访问到
    count: 1,
    obj: {
      name: '喵爷',
      age: 18
    },
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  // getters配置项跟state,mutations,actions同级的
  // getters中定义的都是方法。 本质上是一个属性
  getters: {
    // 目标：让组件渲染出大于5的数据
    // 方法中的参数 就是state，可以直接访问state中的数据
    // 访问getters中的数据
    // 1.$store.getters.filterList
    // 2.mapGetters(['filterList'])
    filterList (state) {
      // 最终把计算出来的结果进行返回
      return state.list.filter(item => item > 5)
    }
  },
  // 2. 定义修改数据的函数（预习）
  // 特点：mutations中定义的方法只能书写同步代码，不能写异步代码
  mutations: {
    // addCount () {}
    // addCount: function () {}
    // 1.mutations中定义的都是修改state中数据的方法
    // 2.方法中都一个默认的形参，这个形参就可以获取到state中的数据
    // 3.需要手动调用mutations中的方法： this.$store.commit('方法名')
    // 注意：mutations中的方法 只能接受一个参数，如果想传多个参数，可以传一个对象
    addCount (state, count) {
      state.count += count
    },
    subCount (state, count) {
      state.count -= count
    },
    changeCount (state, count) {
      // 不能写异步代码
      state.count = count
    }
  },
  actions: {
    // actions中可以书写异步代码
    // 1.actions封装的都是方法
    // context || store
    // 第一个参数context || store可以理解成 就是store实例（$store）
    // 第二个参数是调用actions时传过来的值，并且这个值只能传一个
    // 注意：actions中的方法不会直接调用，需要手动调用
    // 调用的语法：this.$store.dispatch('actions中的方法名',传递的参数)
    changeCountAsync (store, num) {
      setTimeout(() => {
        store.commit('changeCount', num)
      }, 1000)
    }
  },
  modules: {
    // 键：值
    // 键表示模块名， 值表示模块对象
    // user: user,
    // setting: setting
    user,
    setting
  }
})
